<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情-{{$SEO['title']}}</title>
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <!--公用css引用-->
    @include('front.common.style')

    <!--END/公用css引用-->
    <link rel="stylesheet" href="/dist/css/confirm-order.css">
</head>
<body>

<!--公共头部-->
    @include('front.common.header',['noTopNav'=>'true'])

<?php //include 'include/header-noNav.php';?>
<!--END/公共头部-->
@inject('pictureService','App\Interfaces\PictureService')
@inject('orderService','App\Interfaces\OrderService')

<!--面包屑-->
<div class="inbox hr">
    <div class="crumbs-nav fn-mt20">
        <span>您的位置：</span>
        <a class="link" href="/">首页 &gt;</a>
        <a class="link" href="/my/order">我的订单 &gt;</a>
        <a class="link" href="#">订单详情</a>
    </div>
</div>
<!--END/面包屑-->


<!--步骤-->
@if($order->order_status!=5)
<div class="inbox step-by-step order-step">
    <div class="gray-line"></div>
    <div class="success-line" style="width:<?php echo ($order->order_status/4*100).'%'; ?>;"></div>
    <div class="before-line" style="width:<?php echo (($order->order_status-1)/4*100).'%'; ?>;"></div>
    <ul class="step-list ui-cols-4">
        <li class="step col @if($order->order_status == 1) step-cur @elseif($order->order_status > 1) step-before @endif">
            <i class="icon icon-step">1</i>
            <div class="txt">提交订单</div>
            <div class="txt fn-mt4">{{$order->add_time}}</div>
        </li>
        <li class="step col @if($order->order_status == 2) step-cur @elseif($order->order_status > 2) step-before @endif">
            <i class="icon icon-step">2</i>
            <div class="txt">买家付款</div>
            <div class="txt fn-mt4">{{$order->pay_time}}</div>
        </li>
        <li class="step col @if($order->order_status == 3) step-cur @elseif($order->order_status > 3) step-before @endif">
            <i class="icon icon-step">3</i>
            <div class="txt">仓库发货</div>
            <div class="txt fn-mt4">{{$order->shipping_time}}</div>
        </li>
        <li class="step col @if($order->order_status == 4) step-cur @elseif($order->order_status > 4) step-before @endif">
            <i class="icon icon-step">4</i>
            <div class="txt">确认收货</div>
            <div class="txt fn-mt4">{{$order->recive_goods_time}}</div>
        </li>
    </ul>
</div>
@endif
<!--END/步骤-->
<?php //dd($user->id);?>
<!--状态-->
<div class="inbox2 order-details ui-brd-box1 ">
    <div class="order-info">
        <div class="h"><strong>订单详情</strong></div>
        <ul class="info-list">
            <li class="item">
                <div class="param-name">收货地址：</div>
                <div class="param-detail">{{$order->consignee}}，{{$order->mobile}} <br>{{$order->country}} {{$order->province}} {{$order->city}} {{$order->district}}{{$order->address}}</div>
            </li>
            <li class="item">
                <div class="param-name">买家留言：</div>
                <div class="param-detail">@if(!empty($order->order_message)) {{$order->order_message}}@else 无 @endif</div>
            </li>
            <li class="item item-line"></li>
            <li class="item">
                <div class="param-name">订单编号：</div>
                <div class="param-detail">{{$order->order_sn}}</div>
            </li>

             <?php $orderShop = $orderService->getOrdershop($order->order_id) ?>
            <li class="item">
                <div class="param-name">商<span class="fn-ml20">&nbsp;</span>家：</div>
                <div class="param-detail" style="overflow: visible;">
                    @if(isset($orderShop))
                    <a href="/shop/{{$orderShop->shop_id}}" class="link">{{$orderShop->shop_name}}</a>

                    @if($orderShop->shop_name=='阿福易购')
                        <span class="bl-label" style="border-radius: 4px 4px 0 0;">自营</span>
                    @endif
                    @endif
                    <div class="fn-dib hover-show-tip fn-rel">
                        <i class="service icon icon-qq-blue-sm"></i>
                        <div class="bl-tip-box tip-skin-gray" style="left: -53px;top:22px;width:120px; ">
                            <div class="mask-T"></div>
                            <div class="J-box TJ-box"><span class="J"></span><i class="J"></i></div>
                            <div class="bl-tip-con">
                                <ul>
                                    <li>
                                        <a class="js-qq" data-qq="3039215126" href="http://wpa.qq.com/msgrd?v=3&amp;uin=3039215126&amp;site=qq&amp;menu=yes" target="_blank" title="离线"><i class="icon icon-qq-gray-sm fn-mr4" style="margin-top: -3px;"></i>客服-小阿</a>
                                    </li>
                                    <li>
                                        <a class="js-qq" data-qq="1378461406" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1378461406&amp;site=qq&amp;menu=yes" target="_blank" title="离线"><i class="icon icon-qq-gray-sm fn-mr4" style="margin-top: -3px;"></i>客服-小福</a>
                                    </li>
                                    <li>
                                        <a class="js-qq" data-qq="2151543159" href="http://wpa.qq.com/msgrd?v=3&amp;uin=2151543159&amp;site=qq&amp;menu=yes" target="_blank" title="离线"><i class="icon icon-qq-gray-sm fn-mr4" style="margin-top: -3px;"></i>客服-小易</a>
                                    </li>
                                    <li>
                                        <a class="js-qq" data-qq="3082657948" href="http://wpa.qq.com/msgrd?v=3&amp;uin=3082657948&amp;site=qq&amp;menu=yes" target="_blank" title="离线"><i class="icon icon-qq-gray-sm fn-mr4" style="margin-top: -3px;"></i>客服-小塔</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

        </ul>

    </div>
<?php $orderStatusArr = ['0'=>'状态', '1'=>'待支付','2'=>'待发货','3'=>'已发货','4'=>'已完成','5'=>'已取消','6'=>'已退款'];?>
    <div class="order-status">

        <div class="status-info fn-rel">
            <span class="text fn-dib">
                <i class="icon icon-order-status icon-ord-st-pay"></i>订单状态：{{$orderStatusArr[$order->order_status]}}
            </span>

            <ul class="ul">
                <!--未支付提示-->
                @if($order->order_status==1)
                <li class="J-wrap">
                    <span class="js-countDown text-color-danger" data-time="{{$order->pay_left_time}}">0天0小时0分0秒</span><span>后关闭</span>
                </li>
                @elseif($order->order_status==3)
                <li>
                    <span class="fn-mr14">查看物流：

                        <?php
                            switch('yto'){
                                case 'eto':
                                    echo '<a href="http://www.sto.cn" class="link" target="_blank" title="物流">申通快递</a>';
                                break;

                                case 'yto':
                                    echo '<a href="http://www.yto.net.cn/" class="link" target="_blank" title="物流">圆通快递</a>';
                                break;
                            }
                        ?>
                    </span><br>
                    <span class="fn-mr4">运单号:</span>{{$order->shipping_num}}
                </li>
                <!--成功提示-->
                @elseif($order->order_status==4)
                <li>
                    <span class="fn-mr14">查看物流：

                        <?php
                            switch($order->shipping_type){
                                case 'eto':
                                    echo '<a href="http://www.sto.cn/" class="fn-mr14">申通快递</a>';
                                break;

                                case 'yto':
                                    echo '<a href="http://www.yto.net.cn/" class="fn-mr14">圆通快递</a>';
                                break;
                            }
                        ?>

                    </span><br>
                    <span class="fn-mr4">运单号:</span>{{$order->shipping_num}} <br>
                    <span style="margin-left:29px;">{{$order->shipping_time}}</span><span class="text-color-5 fn-ml10">已签收,签收人是本人</span>
                </li>
                @endif

                <!--取消订单提示-->
                @if($order->order_status == 5)
                <li>
                    原因：@if(!empty($order->cancel_reason)){{$order->cancel_reason}}@else 无 @endif
                </li>
                @endif

                @if($order->is_remind==1 && $order->order_status==2)
                <li>
                    已经提醒卖家发货
                </li>
                @endif

            </ul>
        </div>

        <div class="status-opts fn-mt20">

            @if($order->order_status==1)
            <span class="label">您可以</span>
            <a class="fn-btn fn-btn-pay btn-primary" data-id="{{$order->order_id}}"  href="/pay/{{$order->order_id}}">立即支付</a>
            <a href="javascript:;" data-id="{{$order->order_id}}" class="js-cancelOrder fn-btn-cancel">取消订单</a>
            @elseif($order->order_status==2)
            <span class="label">您可以</span>
                @if(!$notice)
                <a class="fn-btn btn-primary btn-radius fn-btn-remind" data-id="{{$order->order_id}}" data-user="{{$user->id}}" href="javascript:;">提醒卖家发货</a>
                @endif
            <a href="javascript:;" data-id="{{$order->order_id}}" data-remind="{{$order->is_remind}}" class="js-cancelOrder fn-btn-cancel">取消订单</a>
            @elseif($order->order_status==3)
            <span class="label">您可以</span>
            <a class="fn-btn fn-btn-receive" data-id="{{$order->order_id}}"  href="javascript:;">确认收货</a>

            @elseif($order->order_status==5 || $order->order_status==6)
            <span class="label">您可以</span>
            <a class="fn-btn fn-btn-payagain" data-id="{{$order->order_id}}" data-goCart="true"  href="javascript:;">再次购买</a>
            @endif
        </div>


    </div>
    <div class="fn-clear"></div>

</div>
<!--END/状态-->

<!--商品列表-->
<div class="inbox order-goods-list">
    <table class="bl-table bl-table-brdli table-tc o-g-list">
        <thead>
        <tr>
            <td colspan="2" style="width: 360px;">商品</td>
            <td style="width: 80px;">单价</td>
            <td style="width: 50px;">数量</td>
            <td style="width:80px;">状态</td>
            <td>运费</td>
        </tr>
        </thead>
        <?php $orderGoodObj=$orderService->getOrderGoods($order->order_id);?>
        <tbody>
        @foreach($orderGoodObj as $key=>$orderGoods)
        <tr data-id="1">
            <td class="goods-info" colspan="5">
                @if($order->order_status==3||$order->order_status==4)
                <div class="fn-rel fn-tl express-wrap">
                    <span class="package-detail">申通快递</span>
                    <span class="package-detail">运单号:{{$order->shipping_num}}</span>
                    <span class="package-detail text-color-5">@if($order->order_status==3){{$order->shipping_time}}@else{{$order->recive_goods_time}} 已签收,签收人是本人@endif</span>
                    <span class="package-address-detail fn-rel fn-dib">


                    </span>
                </div>
                @endif
                <table class="ui-100">
                    <tr>
                        <td class="pic tl ui-nobrd-t">
                            <a href="/goods/{{$orderGoods->goods_id}}" target="_blank" title="{{$orderGoods->goods_name}}">
                                <img class="goods-img" src="{{$pictureService::thumb($orderGoods->goods_thumb, 70, 70)}}" alt="{{$orderGoods->goods_name}}">
                            </a>
                        </td>
                        <td class="tl name" style="width:620px;">
                            <p class="name"><a class="link" href="/goods/{{$orderGoods->goods_id}}" target="_blank" title="{{$orderGoods->goods_name}}">{{$orderGoods->goods_name}} {{$orderGoods->goods_pet_name}}</a></p>

                        </td>
                        <td style="width: 100px;">
                            <span>￥{{$orderGoods->shop_price}}</span>
                        </td>
                        <td style="width:50px;">
                            <span>{{$orderGoods->buy_number}}</span>
                        </td>
                        <td style="width: 100px;">
                            <span>
                                @if($order->order_status==1)未支付
                                @elseif($order->order_status==2)待发货
                                @elseif($order->order_status==3)待收货
                                @elseif($order->order_status==4)已完成
                                @elseif($order->order_status==5)已取消
                                @endif
                            </span>
                            <br>
                            <?php //dd($orderGoods->comment_status);?>
                            @if($order->order_status==4)
                                @if($orderGoods->comment_status==0)
                                <a href="/my/comment" class="text-color-1 link">写评价</a>
                                @else
                                <a class="text-color-1">已评价</a>
                                @endif
                            @endif
                            {{--@if($order->order_status==4 && $order->comment_status==1)--}}

                        </td>
                    </tr>
                </table>
            </td>
            @if($key==0)
            <td class="ui-brd-l" rowspan="{{ $orderGoodObj->count() }}">
                <span class="text-color-1">￥{{$order->shipping_fee}}</span>
            </td>
            @endif
        </tr>

        <?php
            $order_tariff_fee = $order->order_tariff_fee;
            $shipping_fee = $order->shipping_fee;
            $orderGoodsNum = $order->total_goods_number;
            $order_price = $order->order_price;
            $coupon_price=$order->coupon_price?$order->coupon_price:0;
            $discount_price=$order->discount_price?$order->discount_price:0;
            $pay_price = $order->pay_price;

        ?>
        @endforeach

        </tbody>

        <tfoot>
        <?php
       //dd($totlePrice);
        ?>
        <tr>
            <td colspan="6">
                <div class="o-sel-sub fn-tr">
                    <p>
                        <span class="label">商品件数：</span>
                        <span class="fn-dib val">{{$orderGoodsNum}}件</span>
                    </p>

                    <p>
                        <span class="label">金额合计：</span>
                        <span class="fn-dib val">￥{{$order_price}}</span>
                    </p>

                    <p>
                        <span class="label">关税：</span>
                        <span class="fn-dib val">￥{{$order_tariff_fee}}</span>
                    </p>

                    <p>
                        <span class="label">运费：</span>
                        <span class="fn-dib val">￥{{$shipping_fee}}</span>
                    </p>

                    <p>
                        <span class="label">优惠券：</span>
                        <span class="fn-dib val">-￥{{$coupon_price}}</span>
                    </p>

                    <p>
                        <span class="label">折扣：</span>
                        <span class="fn-dib val">-￥{{$discount_price}}</span>
                    </p>

                    <p class="total-num">
                        <span class="label">实付金额：</span>
                        <span class="fn-dib val">￥{{$pay_price}}</span>
                    </p>
                </div>
            </td>
        </tr>
        </tfoot>


    </table>
</div>
<!--END/商品列表-->


<div class="inbox">

</div>

<!--公共尾部-->
@include('front.common.footer')
<?php //include 'include/footer.php'; ?>
<!--END/公共尾部-->

<!--公用js引用-->
@include('front.common.script')
<?php //include 'include/script.php'; ?>
<!--END/公用js引用-->

<!--<script src="../js/"></script>-->
<script>
    //倒计时
    $('.js-countDown').each(function(){
        var that=$(this),time=that.data('time')*1000;

        if(time>0){
            tools.buttonCountdown(that,time,'d:h:m:s','',function(){
                window.location.reload();
            });

            setTimeout(function () {
                that.prop("disabled", false).removeClass("disabled");
            }, 10);
        }else{
            that.closest('.J-wrap').remove();
        }

    });
</script>
<script>


$('.js-cancelOrder').on('click',function(e){
    var btn=$(this),
            id=btn.data('id'),
            reason='';
    layer.confirm('确定要取消该订单吗？',function(index){
        layer.close(index);
        $.ajax({

            url:'/my/order/cancelOrder'+"?"+Math.random(),
            type:'post',
            data:{order_id:id,reason:reason},
            dataType:"json",
            success:function(result){
                if (result.status){
                   window.location.href='/my/order';
                }else{
                    layer.alert(result.message);
                }
            }

        });
    });

});

$('.fn-btn-receive').on('click',function(e){
//获取订单ID
var btn=$(this),
            order_id=btn.data('id');

e.preventDefault();
    layer.confirm('确认收货表示已经收到货物，否则会造成财物两空！',function(index){
        layer.close(index);
$.ajax({
            url:'/my/order/receiveGoods'+"?"+Math.random(),
            type:'post',
            data:{order_id:order_id,'_token':'{{csrf_token()}}'},
            dataType:"json",
            success:function(result){
                if (result.status){
                    window.location.reload();
                    //window.location.href='/my/order';
                }else{
                    alert(result.message);
                }
            }

        });
    });

});

$('.fn-btn-remind').on('click',function(e){
var btn=$(this),order_id=btn.data('id'),user_id=btn.data('user');
//console.log(order_id);
if(btn.hasClass('disabled')) return false;
e.preventDefault();
$.ajax({
            url:'/my/order/remind'+"?"+Math.random(),
            type:'post',
            data:{notice_id:order_id,user_id:user_id,'_token':'{{csrf_token()}}'},
            dataType:"json",
            success:function(result){
            console.log(result);
                if(result.status){
                //console.log(result.status);
                    layer.msg("提醒成功",{offset: '10px'});
                    btn.addClass('disabled');
                }else{
                }
            }
        });
});

//再次购买
$('.fn-btn-payagain').on('click', function (e) {
    e.preventDefault();
    //获取订单ID
    var btn = $(this), order_id = btn.data('id'),goCart=btn.data('gocart');
    var allCartItem=$('.js-cart').find('.cart-num');

    if(typeof order_id=='undefined'||order_id==''||btn.hasClass('disabled')||btn.prop('disabled')) return false;
    btn.addClass('disabled').prop('disabled',true);
    $.ajax({
        url: '/my/order/payagain' + "?" + Math.random(),
        type: 'post',
        data: {order_id: order_id, '_token': '{{csrf_token()}}'},
        dataType: "json",
        success: function (result) {
           if (typeof result.goods_num!='undefined' && result.goods_num != ''){
               typeof layer!='undefined'&&layer.msg('已加入购物车',{
                   icon: 1,
                   offset:'10px',
                   time:2000
               });
               allCartItem.text(result.goods_num);
               if(goCart) window.location.href='/cart';//如果按钮带data="goCart"属性，成功后跳转到购物车
           } else if(typeof result.message!='undefined' && result.message != ''){
               typeof layer!='undefined'&&layer.alert(result.message);
           } else{
               typeof layer!='undefined'&&layer.msg('操作失败，请刷新页面重试！',{offset:'10px'});
           }
           that.removeClass('disabled').prop('disabled',false);
        }

    });

});
</script>
<script type="text/javascript">
    var qqNum="";
    $(".js-qq").each(function(index,e){
        var qq=$(e).data("qq");
        qqNum+=qq+":";
    });
    //动态创建javascript跨域获取QQ在线状态
    var online = [];
    var url="http://webpresence.qq.com/getonline?Type=1&"+qqNum;
    $.getScript(url)
            .done(function() {
                //scrpit加载完成后执行在线状态图片的改写

                $(".js-qq").each(function(index,e){
                    if(online[index]=="1"){
                        $(e).find(".icon").addClass('icon-qq-blue-sm').removeClass('icon-qq-gray-sm');
                        $(e).attr('title','在线');
                    }
                });
            });
</script>
</body>
</html>